<template lang="pug">
    div.bottom
        ul.bottom-ul
            li(v-for="(item,index) in list" :key="index" @click="mark=index")
                router-link(:to='item.to')
                    img(:src="item.url" v-if="mark!==index")
                    img(:src="item.checkUrl" v-else="mark===index")
                    div(:class="{checked:mark===index}") {{item.name}}
</template>

<script>
    export default {
        name: "bottom",
        data() {
            return {
                mark: 0,
                list: [
                    {
                        name: "首页",
                        to: "/",
                        url: require("../assets/icon/home/bottom/home.png"),
                        checkUrl: require("../assets/icon/home/bottom/home-checked.png")
                    },
                    {
                        name: "分类",
                        to: '/classify',
                        url: require("../assets/icon/home/bottom/classify.png"),
                        checkUrl: require("../assets/icon/home/bottom/classify-checked.png")
                    },
                    {
                        name: "购物车",
                        to: '/shopCar',
                        url: require("../assets/icon/home/bottom/shopcar.png"),
                        checkUrl: require("../assets/icon/home/bottom/shopcar-checked.png")
                    },
                    {
                        name: "我的",
                        to: '/my',
                        url: require("../assets/icon/home/bottom/my.png"),
                        checkUrl: require("../assets/icon/home/bottom/my-checked.png")
                    }
                ]
            }
        }
    }
</script>

<style scoped lang="stylus">
    .bottom
        position fixed
        bottom 0
        background white
        border-top 0.01rem solid #ddd
        width 100%
        .bottom-ul
            list-style-type none
            padding 0
            display flex
            justify-content space-around
            align-items center
            height 1.2rem
            margin 0
            li
                width 20%
                float: left
                a
                    display inline-block
                    width: 100%
                    color #333
                    text-decoration none
                img
                    height: 0.6rem
                    width 0.6rem
                div
                    font-weight: 700;
                .checked
                    color #1296db;
</style>
